<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改</title><style>
	html body {
	margin:0px;padding:0px}
	li{
	display: inline;
	margin-right:25px;
    padding-top:15px!important;
	}
	ul{
	margin-top:0px;
	padding-top:12px;
	}
	#One{
	margin-left:10%;
	}
	a{
	font-size:25px
	}
	#CD{
	height:60px;
	background-color:blue;
	}
	a{
	text-decoration:none
	}
	a a:link{
	color:white;
	}
	a:visited{
	color:white;
	}
	a:active{
	color:white;
	}
	a:hover {
	color:red;
	}
	#nr{
	margin-top:5%;
	margin-left:10%;}
	</style>
</head>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
id<input type="text" name="id" id="id" style="margin-left: 34px"><br>
名字<input type="text" name="firstName" id="firstName" style="margin-left: 16px"><br>
姓<input type="text" name="lastName" id="lastName" style="margin-left: 32px"><br>
邮箱<input type="text" name="email" id="email" style="margin-left: 16px"><br>
手机号<input type="text" name="mobile" id="mobile"><br>
生日<input type="text" name="dateOfBirth" id="dateOfBirth" style="margin-left: 16px"><br><br>
<button id="X">修改</button>
<button id="C">查询</button>
<br><br>
<br>

<table id="mytab" border="1">
    <tr id="htr">
        <th>#</th>
        <th>名</th>
        <th>姓</th>
        <th>邮箱</th>
        <th>手机号</th>
        <th>生日</th>
    </tr>
</table>
</div>
<script src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        // alert(id)

        var url = location.search;
        var Request = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1)　//去掉?号
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        //alert(Request["id"]);

        var $id = Request["id"];

        //  alert($id);

        $.ajax({
            url: 'http://192.168.0.120:8080/customers/' + $id,
            type: 'GET',
            success: function (data) { // 数据状态success
                alert(data.firstName);
                // console.log(data.id);
                $('#id').val(data.id);
                $('#firstName').val(data.firstName);
                $('#lastName').val(data.lastName);
                $('#email').val(data.email);
                $('#mobile').val(data.mobile);
                $('#dateOfBirth').val(data.dateOfBirth);

            }
        });


        $('#X').on('click', function () {
            alert(1);

            // var $id=$('#id').val();
            // var $firstName=$('#firstName').val();
            // var $lastName=$('#lastName').val();
            // var $email=$('#email').val();
            // var $mobile=$('#mobile').val();
            // var $dateOfBirth=$('#dateOfBirth').val();
            // var list={"id":$id,"firstName":$firstName,"lastName":$lastName,"email":$email,"mobile":$mobile,"dateOfBirth":$dateOfBirth};
            $obj = {
                "id": $("#id").val(),
                "firstName": $("#firstName").val(),
                "lastName": $("#lastName").val(),
                "email": $("#email").val(),
                "mobile": $("#mobile").val(),
                "dateOfBirth": $("#dateOfBirth").val()
            };

            var DD = JSON.stringify($obj);
            $.ajax({
                cache: false,
                crossDomain: true,
                url: "http://192.168.0.120:8080/customers/" + $id,
                type: 'PUT',
                dataType: 'json',
                data: DD,
                contentType: "application/json",
                success: function (data) { // 数据状态success
                    //alert(data);
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        $tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
                            + data[i].mobile + "</td><td>"
                            + data[i].dateOfBirth + "</td></tr>");
                    }

                }
            });

        });
        $('#C').on('click', function () {
            var $tab1 = $("#mytab");
                $.ajax({
                    //alert(2);
                    url: "http://192.168.0.120:8080/customers" ,
                    type: 'GET',
                    dataType: 'json',
                    data: '',
                    // Jsonp: 'callback',

                    success: function (data) { // 数据状态success
					$("#htr").nextAll().remove();
                        //  alert(3);
                        console.log(data);
                        for (var i = 0; i < data.length; i++) {
                            $tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
                                + data[i].mobile + "</td><td>"
                                + data[i].dateOfBirth + "</td></tr>");

                        }
                    }
                })
            }
        )
    });

</script>


</body>
</html>